@ColorPrimay:#0087e5;
@colorDarkGrey:#333333;
@colorGrey:#666666;
@colorLightGray:#999999;
@colorBorder:#dbdbdb;
@colorOranged:orangered;
@colorGreen:#45d924;
@colorOrange:#ff9000;
.orange{ color: @colorOrange;}
.green{ color: #30a701;}
.oranged{ color: @colorOranged;}
.Primay{ color: @ColorPrimay; }
.white{ color: white;}
.LightGray{ color: @colorLightGray;}
.mar-t20{ margin-top: 20px;}
.mar-t25{ margin-top: 25px;}
.ellipsis{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-break: normal; display: block;}
.ellipsis-mut(@num){ext-overflow: -o-ellipsis-lastline;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: @num; -webkit-line-clamp: @num;-webkit-box-orient: vertical;}
.afterborder{  content: "";  position: absolute;    right: 0;   bottom: 0; left: 0px;   height: 1px;     content: ''; -webkit-transform: scaleY(.5);  transform: scaleY(.5);  background-color: #edebeb;}
.afterborder-r{  content: "";  position: absolute;    right: 0;   bottom: 0;   height: 100%; width: 1px;     content: ''; -webkit-transform: scaleX(.5);  transform: scaleX(.5);  background-color: #edebeb;}
 
/*------------mui------------*/ 
.mui-bar{ background:white; color: @colorDarkGrey;  box-shadow:0 1px 10px rgba(0,0,0,0.2); }
.mui-title,.mui-bar a{ font-size: 16px; line-height: 44px !important;; height: 44px !important;; display: inline-block; padding-top: 0 !important; padding-bottom: 0 !important;;}
.mui-bar .mui-icon {    font-size: 21px;} 
.mui-icon-back:before, .mui-icon-left-nav:before{font-family: "iconfont" !important;content: "\e642";}

.mui-btn-primary{  padding-top: 0; padding-bottom: 0;height: 44px; line-height: 44px; background: @ColorPrimay; border-color: @ColorPrimay; color: white !important; }
.mui-btn-primary:active,.mui-btn-primary.mui-active:enabled, .mui-btn-primary:enabled:active, .mui-btn-primary.mui-active:enabled, .mui-btn-primary:enabled:active, input[type=submit].mui-active:enabled, input[type=submit]:enabled:active{ background: @ColorPrimay - 30% ;border-color: @ColorPrimay - 30%; color: white !important; }
.mui-slider-indicator .mui-indicator{ margin: 0; border-radius: 10px; height: 10px; width: 10px; background: none;border:1px solid white; box-shadow: none;}

.skill-wrap{
    margin-top: 15px; background: white;
    .tit{ font-size: 16px; line-height: 44px; padding: 0px 15px;position: relative;
        strong{ font-weight: normal; color: @colorDarkGrey;}
        span{ font-size: 13px; color: @colorLightGray;  padding-left: 10px;}
    }
    .tit:before{ .afterborder; }
    .dis-tab{ display: table; width: 100%;}
    .dis-row{ display: table-row;}
    .dis-cell{ display: table-cell; height: 90px; width: 50%; vertical-align: middle; text-align: left; position: relative;  
        .iconfont{ font-size: 35px; float: left;  line-height: 40px; width: 37%; text-align: center; display: inline-block;}
        a{  padding-top: 25px; display: block; height: 100%; box-sizing:  content-box;}
        a:active{ background: @colorBorder + 28% ;}
        div{ font-size: 15px; color: @colorDarkGrey;}
        p{ font-size: 11px; color: @colorLightGray;}
    }
    .dis-cell:first-child:after{ .afterborder-r;}
}

.skill-tab-content .mui-control-content:nth-child(1)  .skill-wrap:nth-child(1) .dis-cell .iconfont{  color: #7894ec;}
.skill-tab-content .mui-control-content:nth-child(1)  .skill-wrap:nth-child(2) .dis-cell .iconfont{  color: #66bb6a;}

.skill-tab-content .mui-control-content:nth-child(2)  .skill-wrap:nth-child(1) .dis-cell .iconfont{  color: #f99d30;}
.skill-tab-content .mui-control-content:nth-child(2)  .skill-wrap:nth-child(2) .dis-cell .iconfont{  color: #eb605d;}

.skill-tab-content .mui-control-content:nth-child(3)  .skill-wrap:nth-child(1) .dis-cell .iconfont{  color: #56c074;}
.skill-tab-content .mui-control-content:nth-child(3)  .skill-wrap:nth-child(2) .dis-cell .iconfont{  color: #30acef;}


.skill-list{
     background: white; 
     li{ position: relative;   padding: 15px; font-size: 16px;  color: @colorDarkGrey; }
     li:after{ .afterborder; width: 100%; position: relative; bottom: -15px;}
     li:last-child:before{ height: 0px;}
     .right{margin-top: 5px;}
     .mui-btn{  width: 70px; height: 32px; text-align: center; line-height: 32px; padding: 0;}
     .mui-btn:last-child{ margin-left: 10px;}
     .iconfont{ font-size: 25px; color: white; width: 44px; height: 44px; text-align: center; line-height: 44px ; border-radius: 90px; margin-right: 10px; display: inline-block; background: #428bca;}
     .iconfont:before{ content: "\e61e";  padding-top: 2px; display: inline-block;    }
     i,span{ vertical-align: middle; display: inline-block;}    
     span{    width: 155px;    height: 24px;    overflow: hidden;    text-overflow: ellipsis;    white-space: nowrap;}
}

.random-icon-sub1{    
     li:nth-child(2) .iconfont:before,li:nth-child(21) .iconfont:before{ content: "\e623";}
     li:nth-child(3) .iconfont:before,li:nth-child(22) .iconfont:before{ content: "\e667";}
     li:nth-child(4) .iconfont:before,li:nth-child(23) .iconfont:before{ content: "\e66d";}
     li:nth-child(5) .iconfont:before,li:nth-child(24) .iconfont:before{ content: "\e631";  top:-4px; position: relative;}
     li:nth-child(6) .iconfont:before,li:nth-child(25) .iconfont:before{ content: "\e89a";}
     li:nth-child(7) .iconfont:before,li:nth-child(26) .iconfont:before{ content: "\e66d"; padding-top: 0px;}
     li:nth-child(8) .iconfont:before,li:nth-child(27) .iconfont:before{ content: "\e62a";}
     li:nth-child(9) .iconfont:before,li:nth-child(28) .iconfont:before{ content: "\e700";}
     li:nth-child(10) .iconfont:before,li:nth-child(29) .iconfont:before{ content: "\e625";}
     li:nth-child(11) .iconfont:before,li:nth-child(30) .iconfont:before{ content: "\e635";top:-4px; position: relative;}
     li:nth-child(12) .iconfont:before,li:nth-child(31) .iconfont:before{ content: "\e6b5";}
     li:nth-child(13) .iconfont:before,li:nth-child(32) .iconfont:before{ content: "\e63f";padding-top: 0px;}
     li:nth-child(14) .iconfont:before,li:nth-child(33) .iconfont:before{ content: "\e61c";top:-1px; position: relative;}
     li:nth-child(15) .iconfont:before,li:nth-child(34) .iconfont:before{ content: "\e957";font-size: 28px; }
     li:nth-child(16) .iconfont:before,li:nth-child(35) .iconfont:before{ content: "\e690"; font-size: 28px; padding-top: 4px;}  
     li:nth-child(17) .iconfont:before,li:nth-child(36) .iconfont:before{ content: "\e686";}  
     li:nth-child(18) .iconfont:before,li:nth-child(37) .iconfont:before{ content: "\e620"; top:-2px; position: relative;}  
     li:nth-child(19) .iconfont:before,li:nth-child(38) .iconfont:before{ content: "\e627";font-size: 21px;  padding-top: 0;}  
     li:nth-child(20) .iconfont:before,li:nth-child(39) .iconfont:before{ content: "\e625"; padding-top: 1px;} 
     li:nth-child(2n) .iconfont{  background: #3cb541;}
     li:nth-child(3n) .iconfont{  background: #55af95;}
     li:nth-child(4n) .iconfont{  background: #47a1d9;}
     li:nth-child(5n) .iconfont{  background: #ff7e7e;}
     li:nth-child(6n) .iconfont{  background: #858ae6;}
     li:nth-child(7n) .iconfont{  background: #fbc32b;}
     li:nth-child(8n) .iconfont{  background: #3cb541;} 
}

.random-icon-sub2{    
     li .iconfont:before{ content: "\e624";}
     li:nth-child(2) .iconfont:before,li:nth-child(21) .iconfont:before{ content: "\e686"; padding-top: 0;}
     li:nth-child(3) .iconfont:before,li:nth-child(22) .iconfont:before{ content: "\e6ad";}
     li:nth-child(4) .iconfont:before,li:nth-child(23) .iconfont:before{ content: "\e6ac";}
     li:nth-child(5) .iconfont:before,li:nth-child(24) .iconfont:before{ content: "\e640";}
     li:nth-child(6) .iconfont:before,li:nth-child(25) .iconfont:before{ content: "\e627";font-size: 22px; padding-left: 1px;}
     li:nth-child(7) .iconfont:before,li:nth-child(26) .iconfont:before{ content: "\e63b";    top:-4px; position: relative;}
     li:nth-child(8) .iconfont:before,li:nth-child(27) .iconfont:before{ content: "\e628";}
     li:nth-child(9) .iconfont:before,li:nth-child(28) .iconfont:before{ content: "\e629";}
     li:nth-child(10) .iconfont:before,li:nth-child(29) .iconfont:before{ content: "\e625";}
     li:nth-child(11) .iconfont:before,li:nth-child(30) .iconfont:before{ content: "\e6a6"; padding-top: 1px;}
     li:nth-child(12) .iconfont:before,li:nth-child(31) .iconfont:before{ content: "\e630";}
     li:nth-child(13) .iconfont:before,li:nth-child(32) .iconfont:before{ content: "\e622";}
     li:nth-child(14) .iconfont:before,li:nth-child(33) .iconfont:before{ content: "\e63e";}
     li:nth-child(15) .iconfont:before,li:nth-child(34) .iconfont:before{ content: "\e7aa";    padding-top: 0px;}
     li:nth-child(16) .iconfont:before,li:nth-child(35) .iconfont:before{ content: "\e9c9";}  
     li:nth-child(17) .iconfont:before,li:nth-child(36) .iconfont:before{ content: "\e633"; padding-top: 1px;}  
     li:nth-child(18) .iconfont:before,li:nth-child(37) .iconfont:before{ content: "\e621"; padding-top: 1px;}  
     li:nth-child(19) .iconfont:before,li:nth-child(38) .iconfont:before{ content: "\e686"; padding-top: 0px;}  
     li:nth-child(20) .iconfont:before,li:nth-child(39) .iconfont:before{ content: "\e620"; top:-3px; position: relative; }  
     
     li .iconfont{  background: #53ac64;}
     li:nth-child(2n) .iconfont{  background: #428bca;}
     li:nth-child(3n) .iconfont{  background: #55af95;}
     li:nth-child(5n) .iconfont{  background: #9d566c;}
     li:nth-child(4n) .iconfont{  background: #ff6666;}
     li:nth-child(8n) .iconfont{  background: #50aedf;}
     li:nth-child(6n) .iconfont{  background: #fbc32b;}
     li:nth-child(7n) .iconfont{  background: #3cb541;}
}

.truck-list{
     margin-bottom: 15px;
     .mui-btn{ width: 55px;}
     .icon-huoche{ background: #009688;}
     .icon-kechelufeichaxun{ background: #6db53c;}
     .icon-huoche:before{ content: "\e626";}
     .icon-kechelufeichaxun:before{ content: "\e6e5"; font-size: 28px;}
}
@media(max-width:375px){
    .skill-list span{ width: 125px;}
}
@media(max-width:320px){
    .skill-list .mui-btn{ width: 50px;}
    .truck-list span{ font-size: 14px;}
    .skill-list span{ width: 115px;}
}
.skill-tab{
       text-align: center; padding-top: 15px; border: none;
       .mui-control-item{width: initial; display: inline-block; padding: 0px 22px;  margin: 0px 2px; line-height: 32px; height: 32px; border-radius: 90px; border: none;}
       .mui-active{ background: @ColorPrimay; color: white;}
}
  
.bind-tit{ text-align: center; padding: 45px 0;
    span,img,i{ vertical-align: middle;}
    .link{ padding: 0px 10px;}
    .iconfont{ position: relative; top:4px;}
}
.bind-tit span{ font-size: 16px; }
.bind-tit dt{ padding-bottom: 20px;}

.btn-bind{ background: #32b0ce;}
.btn-bind:enabled:active{ background: #229ebc;}
.bind-form{margin: 0px 15px;background: white;border-radius: 5px;  
    li{ position: relative;}
    .iconfont{ position: absolute;  z-index: 2; font-size: 20px; color: @colorGrey;  left: 15px; top: 10px; } 
    .mui-input-row .mui-input-clear~.mui-icon-clear{    top: 14px;}   
}
.mui-bind-subit{ padding: 15px 15px; }
input.bind-input{ padding-left: 35px;margin-bottom: 0px;border:none;font-size: 16px;background-size: 65px auto;border-bottom: 1px solid #EFEFF4;/* border:none; */height: 23px;padding-top: 23px;padding-bottom: 23px;line-height: 23px;border-radius: 0px;padding-left: 45px;box-sizing: border-box;}
input.bind-ident{background-position: -9px -69px;}
input.bind-name{background-position: -10px -26px;}
input.bind-tel{background-position: -10px -114px;}
.bind-ok{  position:  relative; text-align: center; padding-top: 25%;}
.bind-ok .iconfont{ font-size: 70px; color: #44b133; margin-bottom: 0px;}
.bind-ok span{ font-size: 22px;}
.bind-ok .mui-btn-primary{width:130px;font-size: 15px;}
.bind-ok .red{ margin-top: 5px;}
.mui-popup{ width:92%; border-radius: 0px;}
.mui-popup .photo img{   max-width: 100%; max-height: 250px; margin: 0 auto  ;}
.mui-popup .photo2 img{   width: 100%; max-height: 550px; margin: 0 auto  ;}
.mui-popup .mui-popup-title{ text-align: left;}
.mui-popup-inner{  padding-top: 10px; }
.mui-popup-button:first-child:last-child{}
.mui-popup-button{ font-weight: normal !important;  }
.mui-popup-title{ font-size: 16px;  position: relative; margin: 0px -15px; padding: 0px 15px  10px 15px;}
.mui-popup-title:after{    position: absolute;
    z-index: 15;
    top: auto;
    right: auto;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 1px;
    content: '';
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    background-color: rgba(0,0,0,.2);}
.mui-popup-title+.mui-popup-text{ margin-top: 15px;}
.mui-popup-backdrop{background: rgba(0,0,0,.6);}
.mui-popup.mui-popup-in{    -webkit-transition-duration: 0ms;
    transition-duration: 0ms;}


@media(max-width:414px){
    .mui-popup .photo2 img{ max-height: 550px; }
}


@media(max-width:320px){
    .mui-popup .photo2 img{ max-height: 450px; }
}

.login-form{
     background: none; margin: 0px 0px;
     .logo-brand{text-align: center; padding: 40px 0;
        img{ width: 32%;}
    }    
    input.bind-input{ background: none; color: white; border: 1px solid white; border-radius: 5px;}
    li{ margin-bottom: 10px;}
    .iconfont{ color: white;}
    ::-webkit-input-placeholder,.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-password~.mui-icon-eye, .mui-input-row .mui-input-speech~.mui-icon-speech{ color: white;}
    
}
.mui-login-subit{
     margin: 15px 0px;
    .login-btn{ color: @ColorPrimay; line-height: 44px; height: 44px; padding: 0; margin: 0; border: none; font-size: 16px; }
    .login-btn:enabled:active,.login-btn:disabled{ background: white; color: @ColorPrimay;}
}

.login-bg{
    height: auto;  box-sizing: border-box;
     .mui-content{  background: no-repeat url(../images/login-bg@2x.png); background-size:100% 100%;           padding: 0px 25px;    position: relative;    height: 100%;}
}
.login-weixin{
    position: absolute; bottom: 40px; width: 100%;  left:0px; color: white;  box-sizing: border-box;  padding: 0px 25px;
    .login-tit{   width: 100%;
        dl{ display: flex; }
        dd{ flex: 1;  position: relative;}
        dd:before{ transform: scaleY(0.7); opacity: 0.5; content: ""; width: 100%;  height: 1px;  position: absolute;  background: white; bottom: 12px;    left: 0px;}
        dd:nth-child(2){ font-size: 13px; text-align: center; flex: 1.4;}
        dd:nth-child(2):before{ height: 0px;}
    }
    .icon{
         text-align: center; padding-top: 10px;
         a{ border: 1px solid white; border-radius: 90px; display: inline-block; width: 55px; height: 55px; 
            .iconfont{font-size: 40px; color: white; line-height: 55px;width: 55px; height: 55px;  text-align: center;}
          }
          a:active{ background:#49cc19; border-color: #49cc19;}
         
    }
}

@media(max-width:375px){
    .login-bg .mui-content,.login-weixin{padding: 0px 15px; }
}
@media(max-width:320px){
    .login-bg .mui-content,.login-weixin{padding: 0px 10px; }
}
 
@media(max-height:480px){
    .login-weixin{ bottom:20px}
    .login-form .logo-brand{    padding: 32px 0;}
    .mui-login-subit {    margin: 0px 0px;}
}
 .remaining-time{
     color:#ffa200; line-height:32px;  z-index:0; position:relative;  text-align:center; background:#fff3c7;
     .iconfont{ position:relative; top:1px; font-size:17px;}
}
.remaining-time:after,.remaining-time:before{ content:''; position:absolute; left:0px; transform:scaleY(0.5); -webkit-transform:scaleY(0.5); height:1px; width:100%; background:#fbde77; bottom:0px; z-index:1;}
.remaining-time:before{ bottom:inherit; top:0px; }